从零搭建vite + vue3.0 + vuex + router + sass/less + naive |
您所在的位置：网站首页 › vue3 安装 less › 从零搭建vite + vue3.0 + vuex + router + sass/less + naive |
从零搭建vite + vue3.0 + vuex + router + sass/less + naive
|
Vite官网安装vue的介绍
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。 使用 npm： $ npm init @vitejs/app $ cd $ npm install $ npm run dev或者 yarn： $ yarn create @vitejs/app $ cd $ yarn $ yarn dev是项目的名称 生成项目的时候 请选择 vue 和 typescript。 这样一个最简单的vue3.0 + ts项目搭建好了。 配置vue-router安装vue-router依赖 npm i [email protected] -D 或 yarn add [email protected]请带上版本号安装，否则安装的版本可能被不符合接下来的配置要求，官方下载的vue3.0全套中使用的vue-router也是4.0.0版本。（2021-07-08） 在src文件夹中创建router文件夹，并在router文件夹下创建index.ts文件。 在index.ts中创建类似于这样的router并导出 import { createWebHistory, createRouter } from "vue-router"; const history = createWebHistory(); const router = createRouter({ history, // 路由模式 routes: [ { // 页面逻辑 path: "/", name: "Home", component: () => import("../pages/Home/Home.vue"), }, { path: "/About", name: "About", component: () => import("../pages/About/About.vue"), }, { path: "/Store", name: "Store", component: () => import("../pages/Store/Store.vue"), }, { path: "/Count", name: "Count", component: () => import("../pages/Count/Count.vue"), }, { path: '/TodoList', name: 'TodoList', component: () => import("../pages/TodoList/TodoList.vue"), }, { path: '/RefDom', name: 'RefDom', component: () => import("../pages/RefDom/RefDom.vue"), }, { path: '/ES2016', name: 'ES2016', component: () => import("../pages/ES2016/ES2016.vue"), } ], }); export default router;并在main.ts 入口文件中引入 import { createApp } from "vue"; import router from "./router"; import App from "./App.vue"; const app = createApp(App); app.use(router).mount("#app"); 配置vuex安装vuex依赖 yarn add vuex 或 npm i vuex -D安装行业规范，在src文件夹下创建store文件夹，并创建index.ts文件 创建store并导出 import { createStore } from 'vuex' export default createStore({ state: { name: 'dx' }, mutations: { }, actions: { }, modules: { } })在入口文件main.ts文件中引入并使用 import { createApp } from "vue"; import { create } from "naive-ui"; import router from "./router"; import App from "./App.vue"; import store from "./store"; const app = createApp(App); app.use(store).use(router).mount("#app");在组件中使用 {{$store.state.name}} export default { data() { return { } } }关于vuex的更多使用，请前往https://blog.csdn.net/glorydx/category_9502077.html 配置全局样式按照行业规范在src文件下创建global.css或者less或者sass样式文件，并在App.vue即最外层的vue组件中引入即可。 @import url(./global.css); 组件库 naive-uinaive是vue的作者尤雨溪在微博上亲自推荐的vue3.0组件库。 具体细节请前往 https://blog.csdn.net/glorydx/article/details/118392629?spm=1001.2014.3001.5501 安装 npm i -D naive-ui 或 yarn add naive-ui在入口文件中引入naive-ui import { createApp } from "vue"; import { create } from "naive-ui"; import router from "./router"; import App from "./App.vue"; import store from "./store"; const naive = create() const app = createApp(App); app.use(store).use(router).use(naive).mount("#app");在组件中，按需引入组件库，别一下子全部引入整个naive组件，性能不好，官方也不推荐。 {{ count }} 点击增加 // 只用了nbutton组件 import { NButton } from "naive-ui"; import { ref } from "vue"; function myCount() { let count = ref(0); function myAddButton() { count.value += 1; } return { count, myAddButton }; } export default { // 对引入的组件进行注册 components: { "n-button": NButton, }, setup() { const { count, myAddButton } = myCount(); return { count, myAddButton }; }, };你可能需要修改部分naive-ui的主题变量，通过naive官方提供的n-config-provider组件设置，各种变量 import { NConfigProvider } from "naive-ui"; const themeOverrides = { common: { // primaryColor: "#ff2d52", }, Button: { // textColor: "#ff2d52", }, Select: { peers: { InternalSelection: { // textColor: "#FF0000", }, }, }, // ... }; export default { data() { return { themeOverrides, }; }, components: { "n-config-provider": NConfigProvider, }, }; @import url(./global.css); css预处理器（sass或less）由vite搭建的vue项目默认只支持css，如果想使用less或者sass的话，直接安装less或sass的依赖就好了 使用sass yarn add sass sass-loader 或 npm i sass sass-loader -D使用less yarn add less less-loader 或 npm i less less-loader -D如果想要配置sass的一些默认变量，vite提供了方式，在vite.config.ts中进行如下配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], css: { // css预处理器 preprocessorOptions: { scss: { // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了 // 给导入的路径最后加上 ; additionalData: '@import "./src/assets/scss/var.scss";' } } } })新建一个var.scss文件
|
在组件中使用scss【本文地址】
今日新闻 |
推荐新闻 |